import { jsx as _jsx } from "react/jsx-runtime";
import { ColumnHeightOutlined } from '@ant-design/icons';
import { useIntl } from '@ant-design/pro-provider';
import { Dropdown, Menu, Tooltip } from 'antd-v4';
import React from 'react';
import Container from '../../container';

var DensityIcon = function DensityIcon() {
  var counter = Container.useContainer();
  var intl = useIntl();
  return _jsx(Dropdown, {
    overlay: _jsx(Menu, {
      selectedKeys: [counter.tableSize],
      onClick: function onClick(_ref) {
        var _counter$setTableSize;

        var key = _ref.key;
        (_counter$setTableSize = counter.setTableSize) === null || _counter$setTableSize === void 0 ? void 0 : _counter$setTableSize.call(counter, key);
      },
      style: {
        width: 80
      },
      items: [{
        key: 'large',
        label: intl.getMessage('tableToolBar.densityLarger', '默认')
      }, {
        key: 'middle',
        label: intl.getMessage('tableToolBar.densityMiddle', '中等')
      }, {
        key: 'small',
        label: intl.getMessage('tableToolBar.densitySmall', '紧凑')
      }]
    }),
    trigger: ['click'],
    children: _jsx(Tooltip, {
      title: intl.getMessage('tableToolBar.density', '表格密度'),
      children: _jsx(ColumnHeightOutlined, {})
    })
  });
};

export default /*#__PURE__*/React.memo(DensityIcon);